<template>
  <div class="base">
    <template v-for="(item, index) in msg1">
      <div class="title">{{ item }}</div>
      <fenlei1 v-bind:mydata="msg1[index]" v-if="boole[index]"></fenlei1>
      <fenlei2 v-if="!boole[index]" v-bind:mydata="msg1[index]"></fenlei2>
      <button class="btn" @click="btnchange(index)">{{ btn[index] }}</button>
    </template>
  </div>
</template>

<script>
import fenlei2 from './fenlei2.vue';
import fenlei1 from "./fenlei1.vue";
export default {
  data() {
    return {
      msg1: [
        "热门专题",
        "烘焙甜品饮料",
        "肉类",
        "蔬菜水果",
        "汤粥主食",
        "口味特色",
        "水产",
        "蛋奶豆制品",
        "米面干果腌咸",
      ],
      btn: [
        "展开全部",
        "展开全部",
        "展开全部",
        "展开全部",
        "展开全部",
        "展开全部",
        "展开全部",
        "展开全部",
        "展开全部",
      ],
      boole:[true,true,true,true,true,true,true,true,true]

      //   arr: [{ title: "", data: [{ dishes: "", food: [{content:"",dataset:""}] }] }],
    };
  },
  components: { fenlei1,fenlei2 },
  methods: {
    btnchange(index) {
      var arr1=[];
      var arr = [];
      if (this.btn[index] == "展开全部") {
        this.btn[index] = "收起";
        arr = [...this.btn];
        this.btn = arr;
        this.boole[index]=!this.boole[index];
        arr1 = [...this.boole];
        this.boole=arr1;

      } else {
        this.btn[index] = "展开全部";
        arr = [...this.btn];
        this.btn = arr;
        this.boole[index] = !this.boole[index];
        arr1 = [...this.boole];
        this.boole = arr1;
        console.log(this.boole);
      }
    },
  },


  //   beforeCreate() {
  //       axios(" http://localhost:8081/caipudata").then((res)=>{console.log(res);})
  //   },
};
</script>

<style scoped>
.base {
  width: 920px;
  margin: 0 auto;
}
.title {
  margin-top: 50px;
  font-size: 25px;
  font-weight: bolder;
}
.box {
  width: 614px;
}
button {
  border: none;
  margin-top: 40px;
  position: relative;
  left: 700px;
}
button:hover {
  color: #dd3915;
}
.btn{
  background-color: #f5f6f5;
  margin-bottom: 100px;
  margin-left: 50px;
  font-size: 18px;
}
</style>